<!-- 搜索高亮的组件 -->
<template>
    <div class="search-highlight" v-html="contentShow"></div>
</template>

<script>
const CLASS_NAME = "search-hightlight";

export default {
    props: {
        // 内容
        content: {
            type: String,
            default: ""
        },
        // 关键字
        keyword: {
            type: String,
            default: ""
        },
        // 其他符合搜索条件的文本
        highlightStyle: {
            type: String,
            default: "color: #ff9632"
        },
        // 当前选中的文本
        currentStyle: {
            type: String,
            default: "color: #ff9632"
        }
    },
    data() {
        return {
            lightIndex: 0,
            matchCount: 0
        };
    },
    computed: {
        // 核心方法，用于搜索文本，找到符合的关键字就给其加上带有字体颜色的span标签
        contentShow() {
            if (!this.keyword) return this.content;
            let reg = new RegExp(this.keyword, "g");
            let stringList = this.content.split(reg);
            if (!stringList.length) return this.content;
            let content = "";
            for (let i = 0; i < stringList.length - 1; i++) {
                let style = i === this.lightIndex ? this.currentStyle : this.highlightStyle;
                content += `${stringList[i]}<span style='${style}'>${this.keyword}</span>`;
            }
            content += stringList[stringList.length - 1];
            // 返回带有HTML样式的内容字符串
            return content;
        }
    },
    watch: {
        keyword: {
            immediate: true,
            handler() {
                this.lightIndex = 0;
                this.getMatchCount();
            }
        },
        lightIndex: {
            immediate: true,
            handler() {
                this.$emit("current-change", this.lightIndex);
            }
        },
        matchCount: {
            immediate: true,
            handler() {
                this.$emit("mactch-count-change", this.matchCount);
            }
        }
    },
    methods: {
        scrollTo(index) {
            this.$nextTick(() => {
                let list = this.$el.querySelectorAll(`font[${CLASS_NAME}]`);
                if (list[index]) {
                    this.lightIndex = index;
                    list[index].scrollIntoView();
                }
            });
        },
        searchNext() {
            this.$nextTick(() => {
                let idx = this.lightIndex >= this.matchCount - 1 ? 0 : this.lightIndex + 1;
                this.scrollTo(idx);
            });
        },
        searchLast() {
            this.$nextTick(() => {
                let idx = this.lightIndex <= 0 ? this.matchCount - 1 : this.lightIndex - 1;
                this.scrollTo(idx);
            });
        },
        getMatchCount() {
            this.$nextTick(() => {
                // 在uniapp中，选择节点的方法在这里，与原生Vue开发不一样
                let list = uni.createSelectorQuery(`font[${CLASS_NAME}]`);
                this.matchCount = list.length;
            });
        }
    }
};
</script>
